<template>
  <div>
    <!-- 头部 -->
    <NavBar 
    :class="{'fixed-header': true, 'header-style': isSpecialStyle,'hide-header-style': hideStyle}"
    @mouseover="enterList" @mouseleave="hideList"
    />

    <!-- 主体 -->
    <main>
      <Dialog class="dialog"/>
      <slot/>
    </main>


  </div>
</template>


<script lang="ts">


export default {

  setup(){
    const data = reactive({
      isSpecialStyle: ref(false),
      hideStyle: ref(false),
      Timeout: ref(),
      productlist: ref(true),
      Accessorieslist: ref(true),
      Event: ref(),
    })
    const route = useRoute()

    const hideList = () => {
      data.Timeout = setTimeout(() => {
        data.hideStyle = false
      }, 50);
    }


    const enterList = () => {
      clearTimeout(data.Timeout)
      data.hideStyle = true

    }


    watch(
      () => route.fullPath,
      (newPath, oldPath) => {
        if (newPath == '/solutions'  || newPath == '/resources') {
          data.isSpecialStyle = true
          return
        }
        data.isSpecialStyle = false
      }
    );

    


    return{
      ...toRefs(data),
      hideList,
      enterList
    }
  }
}

</script>




<style scoped>

.body {
  min-width: 1000px;
  @apply bg-light-100 flex flex-col min-h-screen;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  z-index: 999;

}

.header-style {
  background-color: black !important;
  color: #ffffff;
}

.dialog {
  top: 25%;
  left: 33%;
  position: fixed;
  z-index: 1000;
}

.hide-header-style {
  background-color: #ffffff !important;
  color: black;
}

</style>